<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"
    />
    <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all" />
    
    <style>
      .left-container {
        width: auto;
        max-width: 100%;
        padding: 10px;
        display: flex;
        min-height: 83vh; /* 设置最小高度为视口高度 */
      }
      .channel-container {
        width: auto;
        max-width: 100%;
        flex-direction: column;
        padding: 10px;
        display: flex;
        align-items: center;  /* 选项水平居中 */
      }
      .button-container {
        max-width: 100%;
        margin-top: auto;  /* 将按钮容器推到底部 */
        padding-top: 15px;
        padding-bottom: 15px;
        display: flex;
        justify-content: center;  /* 水平居中按钮 */
        gap: 20px;  /* 按钮之间的间隔 */
        margin-right: 10px;
        border-top: 1px solid #eee; /* 1像素边框 */
      }
      .channel-title {
        max-width: 100%;
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 10px;
      }

      .channel-options {
        max-width: 100%;
        display: flex;
        flex-direction: column; /* 改为竖向排列 */
        align-items: center;  /* 选项水平居中 */
        gap: 10px; /* 添加按钮之间的间距 */
      }
      .channel-options input[type="radio"] + label {
        min-width: 200px;
        display: inline-block;
        padding: 8px 12px;
        border: 1px solid #e6e6e6;
        border-radius: 4px;
        cursor: pointer;
        align-self: center;
      }

      .channel-options input[type="radio"]:checked + label {
        max-width: 100%;
        background-color: #16b777;
        color: #fff;
        border-color: #16b777;
      }

      .channel-options input[type="radio"]{
        max-width: 100%;
        width: 0%;
        display: none;
      }
      .channel-options label{
        margin-right: 10px;
        max-width: 100%;
        width: max-content;
        word-break: break-word;
        text-align: center; /* 水平居中 */
      }
      .channel-options>.layui-form-radio{
        display: none;
      }
    </style>
  </head>

  <body>
    <div class="layui-fluid">
      <div class="layui-card">
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
          <div class="layui-row">
            <div class="layui-container left-container layui-form-item">
                <div class="layui-container channel-container">
                <p class="channel-title">渠道</p>
                <div class="channel-options">
                    {foreach $sources as $key => $value}
                    <div class="layui-form-item">
                    <input type="radio" id="source_radio_{$value->source_key}" name="channel" value="{$value->source_key}" {$key == 0 ? 'checked="true"' : ''}>
                    <label class="layui-form-label channel-form-radio" for="source_radio_{$value->source_key}" id="{$value->source_key}">{$value->source_name}</label>
                    </div>
                    {/foreach}
                </div>
                </div>
            </div>
            <!-- 按钮区域 -->
            <div class="button-container">
                <button class="layui-btn layui-btn-danger sourceConfigDel" data-type="del">删除</button>
                <button class="layui-btn layui-btn-normal sourceConfigAdd" data-type="add">新增</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script src="/assets/cos-js-sdk-v5/cos-js-sdk-v5.js"></script>
    <script src="/layuiadmin/layui/layui.js"></script>
    <script>
        layui.config({
            base: "/layuiadmin/" //静态资源所在路径
            , version: "{:config('other.ui_version')}"
        }).extend({
            index: "lib/index", //主入口模块
        }).use(["laydate", 'form'], function () {
            $ = layui.jquery;
            $('.channel-form-radio').click( function (obj) {
                sourceKey = $(this).attr('id');
                notifySourceKey()
            });
            $('.layui-btn.sourceConfigAdd').on('click', function () {
                // 调用父页面的弹窗方法
                window.parent.openSourceConfigAddLayer(null);
            });
            $('.layui-btn.sourceConfigDel').on('click', function () {
                // 获取选中的 radio 的 id
                var selectedSourceKey = $('input[name="channel"]:checked').val();
                var selectedLabel = $("#" + selectedSourceKey);  // 获取对应的 label
                // 调用父页面的弹窗方法
                window.parent.openSourceConfigDelLayer({sourceKey: selectedSourceKey, sourceName: selectedLabel.text()});
            });
        });
        var sourceKey = '{$first_source_key}'; // 要传递的数据
        function notifySourceKey() {
            window.parent.postMessage({ from: 'source', message: sourceKey }, '*'); // 发送消息给父页面
        }
        // 页面加载完成时自动发送消息
        window.onload = notifySourceKey;
    </script>
  </body>
</html>
